<template>
  <div v-if="detail">
    <div class="basic">
      <van-image round width="20rem" height="20rem" :src="detail.brandLogo" />
      <h1 class="fs-40 mt-40">{{ detail.jobName }}</h1>
      <h2 class="fs-28 mt-20">{{ detail.brandName }}</h2>
    </div>
    <div class="flex justify-around m-20 fs-28">
      <span>{{ detail.salaryDesc }}</span>
      <span>{{ detail.cityName }}</span>
    </div>
    <div class="p-40 fs-30">岗位要求</div>
    <div class="p-40 fs-24">
      <van-tag
        type="primary"
        v-for="(item, index) in detail.jobLabels"
        :key="index"
        >{{ item }}</van-tag
      >
    </div>
    <div class="p-40 fs-30">福利待遇</div>
    <div class="p-40 fs-24">
      <van-tag
        type="warning"
        v-for="(item, index) in detail.welfareList"
        :key="index"
        >{{ item }}</van-tag
      >
    </div>
    <div class="fixed">
      <van-button v-if="status == 1" type="warning" block @click="handleJoin"
        >立即报名</van-button
      >
      <van-button v-if="status == 2" color="#445566" block>等待审核</van-button>
      <van-button v-if="status == 3" color="#7788DD" block>预约面试</van-button>
      <van-button v-if="status == 4" color="#55AA66" block>等待入职</van-button>
      <van-button v-if="status == 5" color="#EE8899" block>已被拒绝</van-button>
    </div>
  </div>
</template>

<script>
import { jobDetailGet } from "@/api/job";
import { userJoin, joinCheck } from "@/api/user";
export default {
  data() {
    return {
      detail: null,
      status: 1,
    };
  },
  computed: {
    userInfo() {
      return this.$store.state.user.userInfo;
    },
  },
  created() {
    // console.log(this.$route.params);
    let { id } = this.$route.params;
    jobDetailGet(id).then((res) => {
      //   console.log(res);
      this.detail = res.data;
    });
    //确定当前用户是否已经报名这个岗位
    let userId = this.userInfo ? this.userInfo.objectId : "";
    joinCheck(userId, id).then((res) => {
      console.log(res);
      let { results } = res.data;
      if (results.length) {
        this.status = results[0].joinStatus;
      }
    });
  },
  methods: {
    handleJoin() {
      if (!this.userInfo) {
        // console.log(this.$route);
        this.$store.commit("user/memoMut", this.$route.path);
        this.$router.push("/login");
        return;
      }
      let userId = this.userInfo.objectId; //用户id
      let jobId = this.$route.params.id; //岗位id
      let { brandLogo, brandName, jobName, salaryDesc, areaDistrict } =
        this.detail;
      console.log(111);
      userJoin({
        userId,
        jobId,
        brandLogo,
        brandName,
        jobName,
        salaryDesc,
        areaDistrict,
        joinStatus: 2,
      }).then((res) => {
        this.status = 2;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.basic {
  text-align: center;
}
.van-image {
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  margin: 4rem 0;
}
.van-tag {
  margin-right: 5px;
  margin-bottom: 5px;
}
.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 3rem;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  box-sizing: border-box;
}
</style>
